import React, { Component } from 'react';
import BScroll from "better-scroll"; //引入滚动

import style from "./main.module.css"; //引入样式，样式为一个对象
import axios from 'axios';

// 读取值时用style.D3或者style["D3"]
console.log("style", style);

// 定义一个对象 
let typeObj = {
    "D3": "3D电影",
    "D3MAX": "Max 3D电影",
    "NEW": "新"
}

let stateObj = {
    "sale": "预售",
    "buy": "购票"
}

export class Main extends Component {
    constructor(props) {
        super(props)

        this.state = {
            tabList: [],
        }
    }

    // componentDidMount() {
    //     axios.get("/api/tabList").then( res => {
    //         this.setState({
    //             tabList:res.data,
    //         },() => {
    //             this.bs = new BScroll(".main")
    //         })
    //     })
    // }

    componentDidUpdate() {
        this.bs && this.bs.refresh();
    }

    componentWillUnmount() {
        this.bs && this.bs.destroy();
    }

    render() {
        // 解构 
        const { list } = this.props;
        return ( //渲染内容
            <div className='main'>
                <div className="scroll">
                    {
                        list.length ? //边界值判断
                            list.map(item => {
                                return <li key={item.id}>
                                    <img src={item.img} alt="" />
                                    <div>
                                        <h4>{item.title}</h4>
                                        <p>
                                            {/* 利用对象中括号的取值方式，实现中英文状态的展示 
                                    className 使用css in js 样式
                                    */}
                                            <span className={style[item.type]}>{typeObj[item.type]}</span>
                                            <button className={style[item.state]}>{stateObj[item.state]}</button>
                                        </p>
                                    </div>
                                </li>
                            }) : "暂无相关影片"
                    }
                </div>

            </div>
        )
    }
}

export default Main